<template>
  <div v-loading="formLoading" element-loading-text="提交数据中......">
    <code>
      <svg-icon icon-class="message" style="margin-right:10px;color:red;font-size:20px;"></svg-icon>说明：“首页” 和 “我的” 固定不变，中间三个可自由变换，最多5个.
    </code>
    <div class="c-flex-row" style="min-width:1100px;">
      <div class="phone-container">
        <div class="phone-header"></div>
        <div class="phone-content">
          <h1>首页</h1>
          <div class="nav-menu">
            <div class="menu-ul">
              <div v-for="(item,index) in footerNavs" :key="index">
                <div
                  class="tbr"
                  v-bind:style="{ width:widStyle }"
                  v-if="item.navType >= 0"
                  v-on:click="clickSelected(index)"
                >
                  <div class="padding10" :class="navSelected[index] ? 'nav_active':'' ">
                    <template v-if="item.isIcon==1">
                      <template v-if="navSelected[index]">
                        <template v-if="item.iconChecked">
                          <img class="iconImg" :src="item.iconChecked" />
                        </template>
                        <i v-else :class="'iconfont font-s22 ' + navType[item.navType].icon"></i>
                      </template>
                      <template v-if="!navSelected[index]">
                        <template v-if="item.iconUnchecked">
                          <img class="iconImg" :src="item.iconUnchecked" />
                        </template>
                        <i v-else :class="'iconfont font-s22 ' + navType[item.navType].icon"></i>
                      </template>
                    </template>
                    <i v-else :class="'iconfont font-s22 ' + navType[item.navType].icon"></i>
                    <div class="bottomBarName">{{ navType[item.navType].name }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="footer-circle"></div>
      </div>
      <div class="setting-box font-s12">
        <div class="panel-box">
          <div class="panel" v-for="(nav,index) in footerNavs" :key="index">
            <div v-show="setNavShow[index]">
              <el-button
                v-if="nav.sort!=1 && nav.sort!=5"
                size="mini"
                v-on:click="delNav(index)"
                type="danger"
                icon="el-icon-delete"
                circle
              ></el-button>
              <div style="text-align: center;margin-top: 20px;">
                <el-row>
                  <span
                    class="margin-r10"
                  >名称: {{ nav.navType == 0 ? '请选择导航':navType[nav.navType].name }}</span>
                  <el-dropdown v-if="nav.sort!=1 && nav.sort!=5" trigger="click" @command="editNav">
                    <el-button type="primary" icon="el-icon-edit" circle size="mini">
                      <i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item
                        v-for="(type,ids) in selectNav"
                        :key="ids"
                        :command="index + '_' + type.typeId"
                      >{{type.name}}</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-row>
              </div>
              <div style="text-align: center;">
                <label style="margin-right: 50px;">显示图标:</label>
                <el-radio-group v-model="footerNavs[index].isIcon">
                  <el-radio :label="0">系统默认</el-radio>
                  <el-radio :label="1">自定义图标</el-radio>
                </el-radio-group>
              </div>
              <div style="text-align: center;" v-if="nav.isIcon == 1">
                <div>
                  仅支持png格式，不大于100k
                  <el-popover placement="right" width="245" trigger="hover">
                    <div class="block">
                      <img class="block" src="/static/images/demo.png" fit="fill" />
                    </div>
                    <span slot="reference" class="c-fc-blue">查看实例</span>
                  </el-popover>
                </div>
                <el-upload
                  class="avatar-uploader ib"
                  name="avatar"
                  :action="imageUploadUrl"
                  :show-file-list="false"
                  :on-success="function(res,file){ return handleAvatarSuccess(res,file,index,'iconUnchecked')}"
                  :on-error="iconuploadError"
                  :before-upload="beforeAvatarUpload"
                >
                  <img v-if="nav.iconUnchecked" :src="nav.iconUnchecked" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  <div class="el-upload__tip" style="line-height: 20px;" slot="tip">未选中</div>
                </el-upload>
                <el-upload
                  class="avatar-uploader ib"
                  name="avatar"
                  :action="imageUploadUrl"
                  :show-file-list="false"
                  :on-success="function(res,file){ return handleAvatarSuccess(res,file,index,'iconChecked')}"
                  :on-error="iconuploadError"
                  :before-upload="beforeAvatarUpload"
                >
                  <img v-if="nav.iconChecked" :src="nav.iconChecked" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  <div class="el-upload__tip" style="line-height: 20px;" slot="tip">选中</div>
                </el-upload>
              </div>
            </div>
          </div>
        </div>
        <el-row>
          <el-button
            class="bottom-btn"
            type="primary"
            v-if="footerCount < 5"
            v-on:click="addNav"
            icon="el-icon-plus"
          >添加导航</el-button>
          <el-button class="bottom-btn" type="primary" v-else disabled icon="el-icon-plus">添加导航</el-button>
        </el-row>
      </div>
    </div>
    <el-row style="text-align: center;width: 700px">
      <el-button
        class="bottom-btn"
        v-on:click="saveNav"
        type="success"
        icon="el-icon-check"
        round
      >保存</el-button>
    </el-row>
  </div>
</template>

<script>
import { getFooterNavs, saveFooterNavs } from "@/api/systemManage";
//import { shopManage_systemManage } from "@/utils/permission";
export default {
  data() {
    return {
      imageUploadUrl: process.env.BASE_API + "/common/companies/imageUpload",
      formLoading: false,
      widStyle: "50%",
      footerNavs: [],
      navType: [],
      selectNav: [],
      setNavShow: [],
      footerCount: 0, //左侧底部显示几个
      navSelected: [] //选中样式
    };
  },
  created() {
    this.getCompanyNav();
  },
  methods: {
    getCompanyNav() {
      let that = this;
      getFooterNavs()
        .then(res => {
          that.navType = res.data.data.navType; //导航类型
          let navsAll = res.data.data.navsData;
          that.footerNavs = navsAll; //导航列表数据.
          let navTypeAll = that.navType;
          let hiddenNavIds = [];
          //let i = 0;
          for (var key in navsAll) {
            if (navsAll[key].navType > 0) {
              that.footerCount++;
              that.setNavShow[key] = true;
              hiddenNavIds.push(navsAll[key].navType);
            } else {
              that.setNavShow[key] = false;
            }
            that.navSelected[key] = false;
            //i++;
          }
          that.selectNavLogic(hiddenNavIds);
          that.setNavStyle();
        })
        .catch(error => {
          console.log(error);
        });
    },
    //tbr宽度
    setNavStyle() {
      switch (this.footerCount) {
        case 3:
          this.widStyle = "33.333333333%";
          break;
        case 4:
          this.widStyle = "25%";
          break;
        case 5:
          this.widStyle = "20%";
          break;
        default:
          this.widStyle = "50%";
          break;
      }
    },
    //隐藏nav
    delNav(index) {
      this.footerCount--;
      this.setNavStyle();
      if (this.footerNavs[index].navType > 0) {
        //处理可选导航显示
        let addNavType = this.navType[this.footerNavs[index].navType];
        addNavType["typeId"] = this.footerNavs[index].navType;
        this.selectNav.push(addNavType);
      }
      this.footerNavs[index].navType = -1;
      this.footerNavs[index].isIcon = 0;
      this.navSelected[index] = false;
      this.$set(this.setNavShow, index, !this.setNavShow[index]);
    },
    //添加nav
    addNav() {
      if (this.footerCount >= 5) {
        return;
      }
      let index;
      for (var key in this.setNavShow) {
        if (!this.setNavShow[key]) {
          index = key;
          break;
        }
      }
      this.footerNavs[index].navType = 0;
      this.footerNavs[index].isIcon = 0;
      this.$set(this.setNavShow, index, !this.setNavShow[index]);
      this.footerCount++;
      this.setNavStyle();
    },
    //点击选中状态
    clickSelected(ids) {
      this.$set(this.navSelected, ids, !this.navSelected[ids]);
    },
    handleAvatarSuccess(res, file, index, type) {
      if (res.statusCode == 200) {
        this.$message({
          message: "上传成功",
          type: "success"
        });
        if (type == "iconChecked") {
          this.footerNavs[index].iconChecked = res.data.imageUrl;
        } else if (type == "iconUnchecked") {
          this.footerNavs[index].iconUnchecked = res.data.imageUrl;
        }
        this.$set(this.footerNavs, index, this.footerNavs[index]);
      }
    },
    iconuploadError(err, file) {
      this.$message.error("上传错误：" + err);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/png";
      const isLt100K = file.size / 1024 < 100;
      if (!isJPG) {
        this.$message.error("上传图标只能是 png 格式!");
      }
      if (!isLt100K) {
        this.$message.error("上传图片大小不能超过 100K!");
      }
      return isJPG && isLt100K;
    },
    //修改nav类型
    editNav(dataStr) {
      let data = dataStr.split("_");
      let ids = data[0];
      let typeid = parseInt(data[1]);

      this.footerNavs[ids].navType = typeid;
      this.$set(this.footerNavs, ids, this.footerNavs[ids]);
      this.selectNavLogic([]);
    },
    //处理可选导航显示
    selectNavLogic(hiddenNavIds) {
      if (hiddenNavIds.length == 0) {
        for (var i in this.footerNavs) {
          if (this.footerNavs[i].navType > 0) {
            hiddenNavIds.push(this.footerNavs[i].navType);
          }
        }
      }
      let selectNav = [];
      let navtype = [];
      for (var typeId in this.navType) {
        typeId = parseInt(typeId);
        if (typeId > 0 && hiddenNavIds.indexOf(typeId) == -1) {
          selectNav = this.navType[typeId];
          selectNav["typeId"] = typeId;
          navtype.push(selectNav);
        }
      }
      this.selectNav = navtype;
    },
    saveNav() {
      this.formLoading = true;
      var subData = {};
      subData.data = this.footerNavs;
      saveFooterNavs(subData)
        .then(res => {
          this.formLoading = false;
          console.log(res.data);
          this.$message.success("保存成功");

          /*this.$notify({
            title: '成功',
            message: '这是一条成功的提示消息',
            type: 'success'
          });*/
        })
        .catch(error => {
          this.formLoading = false;
          console.log(error);
        });
    }
  }
};
</script>
<style scoped>
div {
  /*双击取消选中*/
  -moz-user-select: none; /*火狐*/
  -webkit-user-select: none; /*webkit浏览器*/
  -ms-user-select: none; /*IE10*/
  -khtml-user-select: none; /*早期浏览器*/
  user-select: none;
}
.phone-container {
  width: 348px;
  border: 1px solid #eee;
  margin: 20px 0 20px 20px;
  border-radius: 18px;
  position: relative;
  padding-bottom: 90px;
  max-height: 37rem;
}

.phone-header {
  width: 100%;
  height: 60px;
  background: url("../../../../../build/iphone_head.jpg") no-repeat center
    center;
}

.phone-content {
  margin: 0 15px;
  position: relative;
}

.phone-content h1 {
  background: url("../../../../../build/titlebar.jpg") no-repeat;
  margin: 0;
  padding: 18px 60px 0 60px;
  height: 64px;
  line-height: 46px;
  font-size: 16px;
  color: #fff;
  text-align: center;
  cursor: pointer;
  left: -1px;
  right: -1px;
}

.nav-menu {
  height: 380px;
  border: 1px solid #ccc;
  background: #f5f5f5;
}
.nav_active {
  color: #ff4040;
}

.menu-ul {
  position: absolute;
  left: 0;
  bottom: 0;
  margin: 0;
  padding: 0;
  background: #ffffff;
  width: 100%;
  height: 70px;
  line-height: 36px;
  border: 1px solid #eee;
  color: #333;
}

.menu-ul .tbr {
  float: left;
  height: 100%;
  text-align: center;
}
.iconImg {
  width: 23px;
  height: 23px;
}
.bottomBarName {
  font-size: 12px;
  line-height: 16px;
}

.padding10 {
  padding-top: 10px;
  padding-bottom: 10px;
}

li span {
  cursor: pointer;
}

.li-active {
  border-bottom: 1px solid #13ce66;
}

.active {
  border: 1px solid #13ce66;
}

.unactive {
  border: 1px solid #eee;
}

.menu-dl {
  margin: 0;
  display: block;
  position: absolute;
  z-index: 220;
  bottom: 40px;
  left: 15%;
  width: 85px;
  margin-left: -45px;
  min-height: 40px;
  background: #fff;
  border: 1px solid #afaeaf;
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 3px #fff;
  text-align: center;
}

dd {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #f0f0ee;
  padding: 5px 0;
  cursor: pointer;
}

.trangle {
  z-index: 241;
  margin-bottom: -15px;
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 0;
  border: 8px solid red;
  margin-left: -9px;
  border-color: #afaeaf transparent transparent transparent;
}

.left50 {
  left: 50%;
}

.left80 {
  left: 85%;
}

.footer-circle {
  position: absolute;
  bottom: 20px;
  left: 145px;
  width: 60px;
  height: 60px;
  border: 1px solid #ddd;
  border-radius: 100%;
}

.setting-box {
  margin: 10px 0 0 50px;
  border: 1px solid #eee;
  width: 550px;
  height: auto;
}

.panel-box {
  padding: 10px 10px;
  background: #f6f6f6;
  min-height: 200px;
  border: 1px solid #ccc;
  border-radius: 10px;
}

.panel {
  border: 1px solid #ccc;
  background: #fff;
  height: 100%;
  padding: 5px;
  margin-bottom: 10px;
}

.panel div {
  line-height: 40px;
}
.bottom-btn {
  margin: 20px auto;
  display: block;
}

h3 {
  padding: 0;
  margin: 0;
  font-size: 14px;
}

h3 button {
  float: right;
}

label {
  font-weight: 500;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 70px;
  height: 70px;
  line-height: 70px;
  text-align: center;
}
.avatar {
  width: 70px;
  height: 70px;
  display: block;
}
</style>
